<template>
  <div>
    <div id="myChart" :style="{ width: '500px', height: '300px' }"></div>
    <div id="myDisk" :style="{ width: '800px', height: '300px' }"></div>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data() {
    return {}
  },
  mounted() {
    this.drawLine(), this.disk()
  },
  methods: {
    //柱状+折线
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        title: { text: '柱状图+折现图' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {
          type: 'value',
          name: '销售数量',
        },
        series: [
          {
            name: '销量',
            type: 'bar', //柱
            data: [5, 20, 36, 10, 10, 20],
            //更改颜色
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = [
                    '#c23531',
                    '#2f4554',
                    '#61a0a8',
                    '#d48265',
                    '#91c7ae',
                    '#749f83',
                    '#ca8622',
                  ]
                  return colorList[params.dataIndex]
                },
              },
            },
          },
          {
            name: '销量',
            type: 'line', //线
            data: [5, 20, 36, 10, 10, 20],
            smooth: true, //开启平滑
          },
        ],
      })
    },
    //饼
    disk() {
      //获取实例
      let myDisk = this.$echarts.init(document.getElementById('myDisk'))
      // 绘制图表
      myDisk.setOption({
        tooltip: {
          trigger: 'item',
        },
        legend: {
          top: '-1%',
          left: 'center',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '80%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2,
            },
            label: {
              show: false, //中间的文字，默认显示
              position: 'center', //hover/文字的位置
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold',
              },
            },
            labelLine: {
              show: false, //指示线
            },
            data: [
              { value: 1048, name: '1' },
              { value: 735, name: '2' },
              { value: 580, name: '3' },
              { value: 484, name: '4' },
              { value: 300, name: '5' },
            ],
          },
        ],
      })
    },
  },
}
</script>

<style>
</style>